<template>
  <div class="x-line">
    <div :id="id" class="line-ctx"></div>
  </div>
</template>
<script>
export default {
  name: "xline",
  props: {
    mapType: {
      type: String,
      default: ""
    },
    id: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      default: ""
    },
    desc: {
      type: String,
      default: ""
    },
    xData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    dataOther: {
      type: Array,
      default: () => {
        return [];
      }
    },
    bottomlineData:{
        type: Array,
      default: () => {
        return [];
      }
    },
    zizhuDatas:{
        type: Array,
      default: () => {
        return [];
      }
    },
    chuzuDatas:{
        type: Array,
      default: () => {
        return [];
      }
    },
  },
  data() {
    return {
      option: null,
      singleOpt: {
        grid: {
          width: "80%",
          height: "100%",
          left: 40,
          bottom: 20
        },
        legend: {
          width: 20,
          orient: "vertical",
          height: 8,
          top: 10,
          right: 50,
          icon: "rect",
          itemWidth: 10, // 设置宽度

          itemHeight: 8, // 设置高度

          itemGap: 10, // 设置间距
          textStyle: {
            color: "#fff",
            fontSize: 14
          },
          data: this.xData
        },
        color: ["#68E0CF", "#209CFF", "#DEA55C", "#E16757", "#A1F68F"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: [
          {
            type: "category",
            data: this.xData,
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              fontSize: 10
            },
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: "20",
            data: this.data
          }
        ]
      },
      doubleOpt: {
        grid: {
          width: "80%",
          height: "100%",
          left: 40,
          bottom: 20
        },
        legend: {
          width: 20,
          orient: "vertical",
          height: 8,
          top: 10,
          right: 50,
          icon: "rect",
          itemWidth: 10, // 设置宽度

          itemHeight: 8, // 设置高度

          itemGap: 10, // 设置间距
          textStyle: {
            color: "#fff",
            fontSize: 14
          }
        },
        color: ["#68E0CF", "#209CFF", "#DEA55C", "#E16757", "#A1F68F"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: [
          {
            type: "category",
            data: this.xData,
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              fontSize: 10,
              rotate: 0
            },
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "",
            type: "bar",
            stack: "流量",
            barWidth: "20",
            data: []
          },
          {
            name: "",
            type: "bar",
            stack: "流量",
            barWidth: "20",
            data: []
          }
        ]
      },
      lineOpt:{
         grid: {
          top:'15%',
          width: "90%",
          height:'75%',
          left: 40,
          bottom: 10
        },
        tooltip: {
           trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: [],
          textStyle: {
            color: "#fff"
          },
          top: "0%",
          right: "10%",
          icon: "rect"
        },
        color: ["#68E0CF", "#209CFF", "#DEA55C", "#E16757", "#A1F68F"],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xData,
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          },
          splitLine: {
            lineStyle: {
              color: ["grey"],
              width: 1,
              type: "solid"
            }
          }
        },
        series: [
          {
            name: "自住",
            type: "line",
            data: [],
            symbol: "none",
            smooth: true,
            areaStyle: {
              color: "#68E0CF"
            },
            lineStyle: {
              color: "#47e3ff"
            }
          },
          {
            name: "出租",
            type: "line",
            data: [],
            symbol: "none",
            smooth: true,
            areaStyle: {
              color: "#209CFF"
            },
            lineStyle: {
              color: "#f7b500"
            }
          }
        ]
      }
    };
  },
  created() {},
  mounted() {
    this.drawPie();
  },
  methods: {
    drawPie() {
      let echarts = this.$echarts.init(document.getElementById(this.id));

      if (this.mapType === "stopTime") {
        // this.singleOpt.grid.width = "95%";
        // this.option = this.singleOpt;
         this.lineOpt.legend.data=[]
         this.xData=this.xData.reverse()
        this.lineOpt.series[0].data = this.data.reverse();
        this.lineOpt.series[0].name='车辆'
        this.option =this.lineOpt
      } else if (this.mapType === "age") {
        this.singleOpt.xAxis[0].axisLabel.rotate = -10;
        this.singleOpt.xAxis[0].axisLabel.align = "center";
        this.option = this.singleOpt;
      } else if (this.mapType === "splitTime") {

        let localCar = [],
          outlineCar = [];
        let tmp = this.data.map(el => {
          return el.itmes;
        });

        tmp.forEach(el => {
          if (el && el[0].name == "本地车辆") {
            localCar.push(el[0].value);
            outlineCar.push(el[1].value);
          } else if (el && el[0].name == "外地车辆") {
            localCar.push(el[1].value);
            outlineCar.push(el[0].value);
          }
        });
        this.lineOpt.legend.data=["本地","外地"]
        this.lineOpt.series[0].data = localCar;
        this.lineOpt.series[1].data = outlineCar;
        this.lineOpt.series[0].name = "本地";
        this.lineOpt.series[1].name = "外地";
        this.option = this.lineOpt;
      } else if (this.mapType === "housein") {
        console.log("=======");
        // console.log(this.data);
        // let localCar = [],
        //   outlineCar = [];
        // let tmp = this.data.map(el => {
        //   return el.itmes;
        // });

        // tmp.forEach(el => {
        //   if (el && el[0].name == "空置") {
        //     localCar.push(el[0].value);
        //     outlineCar.push(el[1].value);
        //   } else if (el && el[0].name == "入住") {
        //     localCar.push(el[1].value);
        //     outlineCar.push(el[0].value);
        //   }
        // });
        // this.doubleOpt.series[0].data = localCar;
        // this.doubleOpt.series[1].data = outlineCar;
        this.doubleOpt.legend.data=["自住","出租"]
        this.doubleOpt.series[0].data = this.zizhuDatas;
        this.doubleOpt.series[0].name = "自住";
        this.doubleOpt.series[1].data =this.chuzuDatas;
        this.doubleOpt.series[1].name = "出租";
        this.option = this.doubleOpt;
      } else {
        console.log(this.option);
        this.option = this.singleOpt;
      }
      // if(this.type=="stoptime"){
      //     this.option = this.singleOpt
      // }else{
      //   let localCar = [],outlineCar=[]
      //   let tmp = this.data.map(el=>{
      //     return el.itmes
      //   })

      //   tmp.forEach(el=>{
      //     if(el&&el[0].name=='本地车辆'){
      //       localCar.push(el[0].value)
      //       outlineCar.push(el[1].value)
      //     }else if(el&&el[0].name=='外地车辆'){
      //       localCar.push(el[1].value)
      //       outlineCar.push(el[0].value)
      //     }
      //   })
      //   this.doubleOpt.series[0].data = localCar
      //   this.doubleOpt.series[1].data = outlineCar
      //   this.option = this.doubleOpt
      // }
      //console.log(this.option)
      echarts.setOption(this.option);
      echarts.on('click',(param)=>{
       this.$emit('loudong',param.name.replace('楼',''))
      })
    }
  }
};
</script>
<style lang="less" scoped>
.x-line {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  .line-ctx {
    width: 100%;
    height: 100%;
  }
}
</style>
